<template>
	<view class="brand">

		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<image class="brandHead" :src="$wanlshop.oss(option.img) " mode=""></image>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
						:placeholder="option.name" @confirm="onSearchInputConfirmed" @blur="onSearchInputChanged" />
				</view>
			</view>
		</view>
		<view class="pl24 pr24">
			<scroll-view :scroll-y="true" class="scoll-viewS" @scroll="scroll" @scrolltolower="getLists"
				lower-threshold="200" scroll="scroll" style="touch-action: none;" :scroll-top="scrollTop"
				@refresherrefresh='refresherrefresh' :refresher-triggered="triggered" :refresher-enabled='true'
				:refresher-threshold='100' scroll-with-animation="true">
				<view class="flowListBox mt24" v-for="(item,index) in flowList" :key="index"
					@click="$wanlshop.to('/pages/product/goods?id=' + item.id)">
					<image class="imgs" :src="$wanlshop.oss(item.image)" mode=""></image>
					<view class="flex1 ml16 pt12 pb12 pr12">
						<view class="c3 f32 fb overflow_2 imgmsBox">
							<image v-if="item.is_send == 1" class="imgms"
								src="https://img.aibbyp.com/wechatUser/lottery/ms.png" mode=""></image>
							<text :class="{'ml82':item.is_send == 1}">
								{{item.title}}
							</text>
						</view>
						<view class="cf490 flex_sb f28 fb mt12">
							￥{{item.price}}
						</view>
						<view class="info f24" @click.stop="$wanlshop.to('/pages/shop/index?id='+item.shop_id)">
							{{item.shopname}}
							<u-icon name="arrow-right" class="ml8"></u-icon>
						</view>

					</view>
				</view>
				<uni-load-more :status="statusMore" :content-text="contentText" />
			</scroll-view>
		</view>
		<view class="" @click="to_top">
			<u-back-top class="backTop" :scroll-top="old.scrollTop" top="500"></u-back-top>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxStyleTop: {
					top: ''
				},

				option: {
					img: '',
					name: '',
				},
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				triggered: false,
				flowList: [],
				statusMore: 'loading',
				params: {
					search: '',
					sort: 'weigh', //排序
					order: 'asc', //升序降序asc desc
					page: 1,
					filter: {
						brand_id: ''
					}, //过滤字段
					type: 'goods', // goods groups 商品 拼团
					op: {
						brand_id: "=",
					} //过滤条件
				},
			}
		},
		onLoad(option) {
			if (option) {
				this.option = option
				this.params.filter.brand_id = option.id
			}
			this.getLists()
			// 获取微信胶囊位置
			// #ifdef MP-WEIXIN
			this.wxStyleTop = this.$wanlshop.wanlsys()
			// #endif
		},
		methods: {
			to_top() { // 返回顶部
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			scroll(e) { // 经验 --监听滚动
				let g = this;
				this.old.scrollTop = e.detail.scrollTop
				// console.log(e.detail.scrollTop, 'old')
				// console.log(this.otherHeight)
				this.isTop = e.detail.scrollTop >= this.otherHeight - this.statusBarHeight ? true :
					false
				if (this.isTop) {
					this.isTopM = true;
				}
			},
			refresherrefresh() {
				console.log(1);
				this.flowList = []
				this.statusMore = 'loading'
				this.params.page = 1
				this.triggered = true
				this.getLists()
			},
			getLists() {
				if (this.statusMore == 'noMore') {
					return
				}
				this.$api.get({
					url: '/wanlshop/product/lists',
					data: this.params,
					success: res => {
						this.flowList = this.flowList.concat(res.data)
						setTimeout(() => {
							this.triggered = false
						}, 1500)
						this.params.page = res.current_page
						if (res.current_page == res.last_page || res.last_page == 0) {
							this.statusMore = 'noMore'
							return
						}

					}
				})
			},
			onSearchInputConfirmed() {
				console.log(1);
			},
			onSearchInputChanged() {
				console.log(2);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.brand {
		width: 100%;
		height: 100vh;
		background-image: url('https://img.aibbyp.com/wechatUser/lottery/ppbac.png');
		background-size: 100% 332rpx;
		background-repeat: no-repeat;
	
		.scoll-viewS {
			height:100vh;
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 160rpx);
			/* #endif */
			overflow: hidden;
			box-sizing: border-box;
			padding-bottom: 100rpx;
		}

		.flowListBox {
			background: #fff;
			display: flex;
			border-radius: 10rpx;

			.msf {
				background: rgba(255, 201, 196, 0.3);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0rpx 6rpx;
				font-size: 20rpx;
				color: #FD5241;
			}

			.imgmsBox {
				position: relative;
				height: 88rpx;

				.ml82 {
					margin-left: 84rpx;
				}
			}

			.imgms {
				width: 80rpx;
				height: 32rpx;
				position: absolute;
				top: 4rpx;
				left: 0;
			}

			.imgs {
				border-radius: 10rpx;
				width: 230rpx;
				height: 230rpx;

			}
		}

		.brandHead {
			width: 58rpx;
			height: 58rpx;
			margin-left: 24rpx;
			border-radius: 50%;
		}
	}
</style>